<template>
	<view class="product-detail-page">
		<!-- 商品轮播图 -->
		<swiper class="product-swiper" :autoplay="false" @change="swiperChange">
			<swiper-item v-for="(image, index) in product.images" :key="index">
				<image :src="image" mode="aspectFill" class="swiper-image"></image>
			</swiper-item>
		</swiper>

		<!-- 商品基本信息 -->
		<view class="product-info-section">
			<view class="product-price-share-section">
				<view class="product-price-section">
					<text class="product-current-price">¥{{ currentPrice }}</text>
					<text class="product-original-price">¥{{ originalPrice }}</text>
				</view>
				<view class="product-share-button" @click="showSharePopup">
					<uni-icons type="redo" size="18" color="#666"></uni-icons>
					<text class="share-text">分享</text>
				</view>
			</view>
			<text class="product-title">{{ product.name }}</text>
			<view class="product-tags">
				<text class="tag tag-primary" v-for="tag in product.tags" :key="tag">{{ tag }}</text>
			</view>
			<text class="product-sales">已售 {{ product.sales }}件 | </text>
			<text class="product-stock" v-if="currentStock > 0">库存 {{ currentStock }}件</text>
			<text class="product-stock product-stock-empty" v-else>库存不足</text>
		</view>

		<!-- 活动标签区域 -->
		<activity-section :activities="productActivities" :activity-type="activityType"
			:current-activity-id="currentActivityId" @activity-switch="switchActivity"
			@activity-click="handleActivityClick">
		</activity-section>

		<!-- 拼团详情区 -->
		<view class="activity-detail-section" v-if="activityType === 'groupon'">
			<view class="activity-detail-header">
				<text class="activity-detail-title">拼团详情</text>
				<text class="activity-detail-subtitle">{{ getGrouponActivity()?.name || '3人成团，立减30元' }}</text>
			</view>
			<view class="groupon-current-sku">
				<view class="groupon-sku-header">
					<text class="groupon-sku-title">当前拼团商品</text>
				</view>
				<view class="groupon-sku-content">
					<image class="groupon-sku-image" :src="currentSku?.image || product.images[0]" mode="aspectFill">
					</image>
					<view class="groupon-sku-info">
						<text class="groupon-sku-name">{{ product.name }}</text>
						<text class="groupon-sku-spec">{{ selectedSpecText }}</text>
						<view class="groupon-sku-price-row">
							<text class="groupon-sku-price">¥{{ getGrouponPrice() }}</text>
							<text class="groupon-sku-original-price">¥{{ product.currentPrice }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="activity-detail-content">
				<view class="activity-detail-info">
					<view class="activity-detail-item">
						<text class="activity-detail-label">拼团价格</text>
						<text class="activity-detail-value activity-detail-price">¥{{ getGrouponPrice() }}</text>
					</view>
					<view class="activity-detail-item">
						<text class="activity-detail-label">拼团人数</text>
						<text class="activity-detail-value">{{ grouponInfo.requiredPeople }}人</text>
					</view>
					<view class="activity-detail-item">
						<text class="activity-detail-label">剩余时间</text>
						<view class="activity-countdown">
							<text class="countdown-box">{{ grouponInfo.countdown.hours }}</text>
							<text class="countdown-separator">:</text>
							<text class="countdown-box">{{ grouponInfo.countdown.minutes }}</text>
							<text class="countdown-separator">:</text>
							<text class="countdown-box">{{ grouponInfo.countdown.seconds }}</text>
						</view>
					</view>
				</view>
				<view class="activity-detail-participants">
					<text class="participants-title">参与用户</text>
					<view class="participants-avatars">
						<image class="participant-avatar" v-for="(avatar, index) in grouponInfo.participants"
							:key="index" :src="avatar" mode="aspectFill"></image>
						<view class="participant-avatar participant-avatar-more"
							v-if="grouponInfo.participants.length < grouponInfo.requiredPeople">
							<text>?</text>
						</view>
					</view>
					<text class="participants-status">还差{{ grouponInfo.requiredPeople - grouponInfo.participants.length
						}}人，快邀请好友加入吧</text>
				</view>
				<view class="invite-groupon-button-container">
					<button class="invite-groupon-button" type="primary" @click="inviteFriendsToGroupon">邀请好友拼团</button>
				</view>
			</view>
		</view>

		<!-- 砍价详情区 -->
		<view class="activity-detail-section" v-if="activityType === 'bargain'">
			<view class="activity-detail-header">
				<text class="activity-detail-title">砍价详情</text>
				<text class="activity-detail-subtitle">{{ getBargainActivity()?.name || '邀请好友砍价，最低减50元' }}</text>
			</view>
			<view class="bargain-current-sku">
				<view class="bargain-sku-header">
					<text class="bargain-sku-title">当前砍价商品</text>
				</view>
				<view class="bargain-sku-content">
					<image class="bargain-sku-image" :src="currentSku?.image || product.images[0]" mode="aspectFill">
					</image>
					<view class="bargain-sku-info">
						<text class="bargain-sku-name">{{ product.name }}</text>
						<text class="bargain-sku-spec">{{ selectedSpecText }}</text>
						<view class="bargain-sku-price-row">
							<text class="bargain-sku-price">¥{{ bargainInfo.currentPrice }}</text>
							<text class="bargain-sku-original-price">¥{{ product.currentPrice }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="activity-detail-content">
				<view class="activity-detail-info">
					<view class="activity-detail-item">
						<text class="activity-detail-label">当前价格</text>
						<text class="activity-detail-value activity-detail-price">¥{{ bargainInfo.currentPrice }}</text>
					</view>
					<view class="activity-detail-item">
						<text class="activity-detail-label">底价</text>
						<text class="activity-detail-value">¥{{ getBargainPrice() }}</text>
					</view>
					<view class="activity-detail-item">
						<text class="activity-detail-label">剩余时间</text>
						<view class="activity-countdown">
							<text class="countdown-box">{{ bargainInfo.countdown.hours }}</text>
							<text class="countdown-separator">:</text>
							<text class="countdown-box">{{ bargainInfo.countdown.minutes }}</text>
							<text class="countdown-separator">:</text>
							<text class="countdown-box">{{ bargainInfo.countdown.seconds }}</text>
						</view>
					</view>
				</view>
				<view class="bargain-progress">
					<view class="progress-text">
						<text>已砍¥{{ bargainInfo.bargainedAmount }}</text>
						<text>还差¥{{ bargainInfo.remainingAmount }}</text>
					</view>
					<view class="progress-bar">
						<view class="progress-fill" :style="{ width: bargainInfo.progressPercentage + '%' }"></view>
					</view>
				</view>
				<view class="bargain-friends">
					<text class="friends-title">好友助力记录（{{ bargainInfo.friends.length }}人）</text>
					<view class="friends-list">
						<view class="friend-item" v-for="(friend, index) in bargainInfo.friends.slice(0, 3)"
							:key="index">
							<image class="friend-avatar" :src="friend.avatar" mode="aspectFill"></image>
							<text class="friend-name">{{ friend.name }}</text>
							<text class="friend-price">砍掉¥{{ friend.price }}</text>
						</view>
						<view class="friend-more" v-if="bargainInfo.friends.length > 3">
							<text>查看更多</text>
						</view>
					</view>
				</view>
				<view class="invite-bargain-button-container">
					<button class="invite-bargain-button" type="primary" @click="inviteFriendsToBargain">邀请好友砍价</button>
				</view>
			</view>
		</view>

		<!-- 商家信息 -->
		<view class="merchant-section" @click="goToShop">
			<image class="merchant-logo" :src="product.merchant.logo" mode="aspectFill"></image>
			<view class="merchant-info">
				<text class="merchant-name">{{ product.merchant.name }}</text>
				<view class="merchant-stats">
					<view class="merchant-stat" v-for="stat in product.merchant.stats" :key="stat.label">
						{{ stat.label }} <text class="merchant-stat-value">{{ stat.value }}</text>
					</view>
				</view>
			</view>
			<view class="merchant-enter">进店</view>
		</view>

		<!-- 商品规格选择 -->
		<view class="product-info-section" @click="showSkuPopup">
			<view class="product-sku-section">
				<text class="product-section-title">规格</text>
				<view class="sku-selected">
					{{ selectedSpecText }}
					<uni-icons type="right" size="14" color="#999"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 商品详情 -->
		<view class="product-detail-section">
			<view class="product-detail-tabs">
				<view class="product-detail-tab" v-for="tab in tabs" :key="tab.id"
					:class="{ active: activeTab === tab.id }" @click="changeTab(tab.id)">
					{{ tab.name }}
				</view>
			</view>

			<!-- 商品详情内容 -->
			<view class="tab-content" v-show="activeTab === 'detail'">
				<rich-text :nodes="product.detailContent"></rich-text>
			</view>

			<!-- 规格参数内容 -->
			<view class="tab-content" v-show="activeTab === 'params'">
				<view class="param-item" v-for="param in product.params" :key="param.label">
					<text class="param-label">{{ param.label }}</text>
					<text class="param-value">{{ param.value }}</text>
				</view>
			</view>

			<!-- 用户评价内容 -->
			<view class="tab-content" v-show="activeTab === 'reviews'">
				<view class="review-item" v-for="review in product.reviews" :key="review.id">
					<view class="review-user">
						<image class="review-avatar" :src="review.avatar" mode="aspectFill"></image>
						<text class="review-username">{{ review.username }}</text>
						<text class="review-date">{{ review.date }}</text>
					</view>
					<view class="review-rating">
						<uni-icons v-for="n in 5" :key="n" type="star-filled" size="14"
							:color="n <= review.rating ? '#ffcc00' : '#eee'"></uni-icons>
					</view>
					<text class="review-content">{{ review.content }}</text>
					<view class="review-images" v-if="review.images && review.images.length > 0">
						<image class="review-image" v-for="(img, idx) in review.images" :key="idx" :src="img"
							mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="product-action-bar">
			<view class="action-icon" @click="contactService">
				<uni-icons type="chat" size="20"></uni-icons>
				<text class="action-icon-label">客服</text>
			</view>
			<view class="action-icon" @click="goToShop">
				<uni-icons type="shop" size="20"></uni-icons>
				<text class="action-icon-label">店铺</text>
			</view>
			<view class="action-icon" @click="goToCart">
				<uni-icons type="cart" size="20"></uni-icons>
				<text class="action-icon-label">购物车</text>
				<view class="action-icon-badge" v-if="cartCount > 0">{{ cartCount }}</view>
			</view>

			<!-- 普通商品底部按钮 -->
			<view class="action-buttons" v-if="activityType === 'normal'">
				<button class="action-button action-button-cart" type="default" @click="showSkuPopup">加入购物车</button>
				<button class="action-button action-button-buy" type="primary" @click="buyNow">立即购买</button>
			</view>

			<!-- 拼团商品底部按钮 -->
			<view class="action-buttons" v-else-if="activityType === 'groupon'">
				<button class="action-button action-button-cart" type="default" @click="showSkuPopup">单独购买</button>
				<button class="action-button action-button-groupon" type="primary" @click="startGroupon">发起拼团</button>
			</view>

			<!-- 秒杀商品底部按钮 -->
			<view class="action-buttons" v-else-if="activityType === 'seckill'">
				<button class="action-button action-button-seckill" type="primary" @click="joinSeckill">立即秒杀</button>
			</view>

			<!-- 砍价商品底部按钮 -->
			<view class="action-buttons" v-else-if="activityType === 'bargain'">
				<button class="action-button action-button-bargain" type="primary" @click="startBargain">发起砍价</button>
			</view>

			<!-- 抢购商品底部按钮 -->
			<view class="action-buttons" v-else-if="activityType === 'flashsale'">
				<button class="action-button action-button-flashsale" type="primary"
					@click="joinFlashsale">立即抢购</button>
			</view>

			<!-- 移除了优惠券商品底部按钮 -->
		</view>

		<!-- 规格选择弹窗 -->
		<uni-popup ref="skuPopup" type="bottom" :mask-click="true">
			<view class="sku-popup">
				<uni-icons type="close" size="20" color="#999" class="sku-popup-close"
					@click="closeSkuPopup"></uni-icons>

				<view class="sku-popup-header">
					<image class="sku-popup-img" :src="product.images[0]" mode="aspectFill"></image>
					<view class="sku-popup-info">
						<!-- 普通商品价格 -->
						<view class="sku-popup-price-section" v-if="activityType === 'normal'">
							<view class="sku-popup-price-row">
								<text class="sku-popup-price">¥{{ currentPrice }}</text>
							</view>
							<view class="sku-popup-original-price-row">
								<text class="sku-popup-original-price">¥{{ originalPrice }}</text>
							</view>
							<view class="sku-popup-stock" v-if="currentStock > 0">
								<text>库存: {{ currentStock }}</text>
							</view>
							<view class="sku-popup-stock sku-popup-stock-empty" v-else>
								<text>库存不足</text>
							</view>
						</view>

						<!-- 拼团商品价格 -->
						<view class="sku-popup-price-section" v-else-if="activityType === 'groupon'">
							<view class="sku-popup-price-row">
								<text class="sku-popup-price sku-popup-groupon-price">¥{{ getGrouponPrice() }}</text>
								<text class="sku-popup-price-label">拼团价</text>
							</view>
							<view class="sku-popup-original-price-row">
								<text class="sku-popup-original-price">¥{{ product.currentPrice }}</text>
							</view>
						</view>

						<!-- 秒杀商品价格 -->
						<view class="sku-popup-price-section" v-else-if="activityType === 'seckill'">
							<view class="sku-popup-price-row">
								<text class="sku-popup-price sku-popup-seckill-price">¥{{ getSeckillPrice() }}</text>
								<text class="sku-popup-price-label">秒杀价</text>
							</view>
							<view class="sku-popup-original-price-row">
								<text class="sku-popup-original-price">¥{{ product.currentPrice }}</text>
							</view>
						</view>

						<!-- 砍价商品价格 -->
						<view class="sku-popup-price-section" v-else-if="activityType === 'bargain'">
							<view class="sku-popup-price-row">
								<text class="sku-popup-price sku-popup-bargain-price">¥{{ getBargainPrice() }}</text>
								<text class="sku-popup-price-label">底价</text>
							</view>
							<view class="sku-popup-original-price-row">
								<text class="sku-popup-original-price">¥{{ product.currentPrice }}</text>
							</view>
						</view>

						<!-- 抢购商品价格 -->
						<view class="sku-popup-price-section" v-else-if="activityType === 'flashsale'">
							<view class="sku-popup-price-row">
								<text class="sku-popup-price sku-popup-flashsale-price">¥{{ getFlashsalePrice()
									}}</text>
								<text class="sku-popup-price-label">抢购价</text>
							</view>
							<view class="sku-popup-original-price-row">
								<text class="sku-popup-original-price">¥{{ product.currentPrice }}</text>
							</view>
						</view>

						<text class="sku-popup-selected">{{ selectedSpecText }}</text>
					</view>
				</view>

				<!-- 使用规格选择组件 -->
				<sku-selector :specs="product.specs" v-model:selectedSpecs="selectedSpecs" v-model:quantity="quantity"
					@spec-change="updatePriceDisplay"></sku-selector>

				<!-- 库存不足提示 -->
				<view class="sku-stock-warning" v-if="currentSku && currentSku.stock <= 5 && currentSku.stock > 0">
					<text>库存紧张，仅剩 {{ currentSku.stock }} 件</text>
				</view>
				<view class="sku-stock-warning sku-stock-empty" v-else-if="currentSku && currentSku.stock <= 0">
					<text>所选规格已售罄</text>
				</view>

				<!-- 根据活动类型显示不同的底部按钮 -->
				<view class="product-action-buttons">
					<!-- 普通商品按钮 -->
					<template v-if="activityType === 'normal'">
						<button class="action-button add-cart-btn" type="default" @click="addToCart"
							:disabled="currentStock <= 0">加入购物车</button>
						<button class="action-button buy-now-btn" type="primary" @click="buyNowFromPopup"
							:disabled="currentStock <= 0">立即购买 <text class="button-price">¥{{ currentPrice
								}}</text></button>
					</template>

					<!-- 拼团商品按钮 -->
					<template v-else-if="activityType === 'groupon'">
						<button class="action-button add-cart-btn" type="default" @click="addToCart">单独购买 <text
								class="button-price">¥{{
			product.currentPrice }}</text></button>
						<button class="action-button action-button-groupon" type="primary" @click="buyNowFromPopup">发起拼团
							<text class="button-price">¥{{ getGrouponPrice() }}</text></button>
					</template>

					<!-- 秒杀商品按钮 -->
					<template v-else-if="activityType === 'seckill'">
						<button class="action-button action-button-seckill" type="primary" @click="buyNowFromPopup">立即秒杀
							<text class="button-price">¥{{ getSeckillPrice() }}</text></button>
					</template>

					<!-- 砍价商品按钮 -->
					<template v-else-if="activityType === 'bargain'">
						<button class="action-button action-button-bargain" type="primary" @click="buyNowFromPopup">发起砍价
							<text class="button-price">¥{{ getBargainPrice() }}</text></button>
					</template>

					<!-- 抢购商品按钮 -->
					<template v-else-if="activityType === 'flashsale'">
						<button class="action-button action-button-flashsale" type="primary"
							@click="buyNowFromPopup">立即抢购 <text class="button-price">¥{{ getFlashsalePrice()
								}}</text></button>
					</template>
				</view>
			</view>
		</uni-popup>

		<!-- 分享弹窗 -->
		<uni-popup ref="sharePopup" type="bottom" :mask-click="true">
			<view class="share-popup">
				<view class="share-popup-title">分享给好友</view>
				<view class="share-options">
					<view class="share-option" @click="shareToFriend">
						<view class="share-icon share-icon-wechat">
							<uni-icons type="weixin" size="30" color="#07c160"></uni-icons>
						</view>
						<text class="share-text">微信好友</text>
					</view>
					<view class="share-option" @click="shareToTimeline">
						<view class="share-icon share-icon-timeline">
							<uni-icons type="pyq" size="30" color="#07c160"></uni-icons>
						</view>
						<text class="share-text">朋友圈</text>
					</view>
					<view class="share-option" @click="generatePoster">
						<view class="share-icon share-icon-poster">
							<uni-icons type="image" size="30" color="#ff6a6a"></uni-icons>
						</view>
						<text class="share-text">生成海报</text>
					</view>
				</view>
				<button class="share-cancel" type="default" @click="closeSharePopup">取消</button>
			</view>
		</uni-popup>

		<!-- 海报弹窗 -->
		<uni-popup ref="posterPopup" type="center" :mask-click="true">
			<view class="poster-popup">
				<image class="poster-image" :src="posterUrl" mode="aspectFit"></image>
				<view class="poster-actions">
					<button class="poster-action-btn" type="primary" @click="savePoster">保存到相册</button>
					<button class="poster-action-btn poster-action-close" type="default"
						@click="closePosterPopup">关闭</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import {
	ref,
	computed,
} from 'vue'

import {
	onLoad
} from "@dcloudio/uni-app"

// 引入活动组件
import ActivitySection from '@/components/activity-section/index.vue'
// 引入规格选择组件
import SkuSelector from '@/components/sku-selector/index.vue'

// 当前显示的图片索引
const currentImageIndex = ref(0)

// 活动数据
const productActivities = ref([{
	id: 1,
	type: 'groupon',
	typeText: '拼团',
	name: '3人成团，立减30元',
	discount: 30,
	startTime: '2023-10-01 00:00:00',
	endTime: '2023-12-31 23:59:59'
},
{
	id: 2,
	type: 'seckill',
	typeText: '秒杀',
	name: '限时秒杀，低至7折',
	discount: 0.7,
	startTime: '2023-10-15 00:00:00',
	endTime: '2023-10-20 23:59:59'
},
{
	id: 3,
	type: 'flashsale',
	typeText: '抢购',
	name: '限量100件，抢完即止',
	limit: 100,
	startTime: '2023-10-10 10:00:00',
	endTime: '2023-10-10 22:00:00'
},
{
	id: 5,
	type: 'bargain',
	typeText: '砍价',
	name: '邀请好友砍价，最低减50元',
	discount: 50,
	startTime: '2023-10-01 00:00:00',
	endTime: '2023-12-31 23:59:59'
}
])

// 当前活动ID
const currentActivityId = ref(null)

// 当前活动类型
const activityType = ref('normal') // normal, groupon, seckill, bargain

// 分享者ID
const sharerId = ref(null)

// 海报URL
const posterUrl = ref('')

// 商品数据
const product = ref({
	id: 1,
	name: '北欧风简约陶瓷餐具套装家用碗碟套装 4人份16件套',
	currentPrice: '89.9',
	originalPrice: '129.9',
	sales: '10000000',
	tags: ['包邮', '7天无理由退换', '48小时发货'],
	images: [
		'https://images.unsplash.com/photo-1590794056226-79ef3a8147e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80',
		'https://images.unsplash.com/photo-1603199506016-b9a594b593c0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2074&q=80',
		'https://images.unsplash.com/photo-1563136060-0a1c38c6ca96?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'
	],
	merchant: {
		id: 1,
		name: '名创优品旗舰店',
		logo: 'https://images.unsplash.com/photo-1542838132-92c53300491e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2074&q=80',
		stats: [{
			label: '商品',
			value: '4.9'
		},
		{
			label: '物流',
			value: '4.8'
		},
		{
			label: '服务',
			value: '4.9'
		}
		]
	},
	// 规格定义
	specs: [{
		name: '规格',
		options: ['4人份16件套', '2人份8件套', '6人份24件套']
	},
	{
		name: '颜色',
		options: ['简约白', '薄荷绿', '莫兰迪灰', '樱花粉']
	}
	],
	// SKU数据
	skus: [
		{
			id: 101,
			specs: { '规格': '4人份16件套', '颜色': '简约白' },
			price: '89.9',
			originalPrice: '129.9',
			stock: 100
		},
		{
			id: 102,
			specs: { '规格': '4人份16件套', '颜色': '薄荷绿' },
			price: '89.9',
			originalPrice: '129.9',
			stock: 80
		},
		{
			id: 103,
			specs: { '规格': '4人份16件套', '颜色': '莫兰迪灰' },
			price: '92.9',
			originalPrice: '129.9',
			stock: 50
		},
		{
			id: 104,
			specs: { '规格': '4人份16件套', '颜色': '樱花粉' },
			price: '92.9',
			originalPrice: '129.9',
			stock: 60
		},
		{
			id: 105,
			specs: { '规格': '2人份8件套', '颜色': '简约白' },
			price: '49.9',
			originalPrice: '69.9',
			stock: 100
		},
		{
			id: 106,
			specs: { '规格': '2人份8件套', '颜色': '薄荷绿' },
			price: '49.9',
			originalPrice: '69.9',
			stock: 90
		},
		{
			id: 107,
			specs: { '规格': '2人份8件套', '颜色': '莫兰迪灰' },
			price: '52.9',
			originalPrice: '69.9',
			stock: 70
		},
		{
			id: 108,
			specs: { '规格': '2人份8件套', '颜色': '樱花粉' },
			price: '52.9',
			originalPrice: '69.9',
			stock: 80
		},
		{
			id: 109,
			specs: { '规格': '6人份24件套', '颜色': '简约白' },
			price: '129.9',
			originalPrice: '169.9',
			stock: 50
		},
		{
			id: 110,
			specs: { '规格': '6人份24件套', '颜色': '薄荷绿' },
			price: '129.9',
			originalPrice: '169.9',
			stock: 40
		},
		{
			id: 111,
			specs: { '规格': '6人份24件套', '颜色': '莫兰迪灰' },
			price: '135.9',
			originalPrice: '169.9',
			stock: 30
		},
		{
			id: 112,
			specs: { '规格': '6人份24件套', '颜色': '樱花粉' },
			price: '135.9',
			originalPrice: '169.9',
			stock: 35
		}
	],
	params: [{
		label: '品牌',
		value: '名创优品'
	},
	{
		label: '材质',
		value: '陶瓷'
	},
	{
		label: '规格',
		value: '4人份16件套/2人份8件套/6人份24件套'
	},
	{
		label: '颜色',
		value: '简约白/薄荷绿/莫兰迪灰/樱花粉'
	},
	{
		label: '产地',
		value: '中国'
	},
	{
		label: '重量',
		value: '约3.5kg（16件套）'
	},
	{
		label: '适用人群',
		value: '全年龄段'
	},
	{
		label: '保质期',
		value: '无固定保质期'
	},
	{
		label: '包装方式',
		value: '精美礼盒装'
	}
	],
	detailContent: `
    <p>【材质】优质陶瓷，环保健康，经久耐用</p>
    <p>【设计】北欧简约风格，纯色设计，百搭不过时</p>
    <p>【套装内容】4个饭碗、4个汤碗、4个盘子、4双筷子</p>
    <p>【适用场景】家庭日常用餐、朋友聚会、节日礼品</p>
    <p>【产品特点】</p>
    <p>1. 简约大气：纯色设计，百搭不过时</p>
    <p>2. 材质优良：优质陶瓷，不含有害物质</p>
    <p>3. 实用耐用：防摔耐磨，经久耐用</p>
    <p>4. 轻巧便携：轻量设计，使用舒适</p>
  `,
	reviews: [{
		id: 1,
		username: '张**',
		avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1780&q=80',
		date: '2023-06-15',
		rating: 5,
		content: '质量非常好，颜色也很漂亮，简约大方，很适合我家的装修风格。包装很严实，没有破损，很满意的一次购物！',
		images: [
			'https://images.unsplash.com/photo-1590794056226-79ef3a8147e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80',
			'https://images.unsplash.com/photo-1603199506016-b9a594b593c0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2074&q=80'
		]
	},
	{
		id: 2,
		username: '李**',
		avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2787&q=80',
		date: '2023-06-10',
		rating: 4.5,
		content: '餐具很漂亮，质量也不错，就是有一个碗有一点点瑕疵，不过不影响使用，总体来说还是很满意的。'
	}
	]
})

// 购物车数量
const cartCount = ref(2)

// 规格选择
const selectedSpecs = ref({
	'规格': '4人份16件套',
	'颜色': '简约白'
})

// 购买数量
const quantity = ref(1)

// 当前选中的标签页
const activeTab = ref('detail')

// 标签页数据
const tabs = ref([{
	id: 'detail',
	name: '商品详情'
},
{
	id: 'params',
	name: '规格参数'
},
{
	id: 'reviews',
	name: '用户评价(2354)'
}
])

// 规格弹窗引用
const skuPopup = ref(null)

// 分享弹窗引用
const sharePopup = ref(null)

// 海报弹窗引用
const posterPopup = ref(null)

// 计算选中的规格文本
const selectedSpecText = computed(() => {
	return `已选：${selectedSpecs.value['规格']}，${selectedSpecs.value['颜色']}，${quantity.value}件`
})

// 获取当前选中的SKU
const currentSku = computed(() => {
	// 检查是否所有规格都已选择
	const allSpecsSelected = product.value.specs.every(spec => {
		return selectedSpecs.value[spec.name] !== undefined;
	});

	if (!allSpecsSelected) return null;

	// 查找匹配的SKU
	return product.value.skus.find(sku => {
		return Object.keys(sku.specs).every(specName => {
			return sku.specs[specName] === selectedSpecs.value[specName];
		});
	});
});

// 当前SKU价格
const currentPrice = computed(() => {
	if (currentSku.value) {
		return currentSku.value.price;
	}
	return product.value.currentPrice;
});

// 当前SKU原价
const originalPrice = computed(() => {
	if (currentSku.value) {
		return currentSku.value.originalPrice;
	}
	return product.value.originalPrice;
});

// 当前SKU库存
const currentStock = computed(() => {
	if (currentSku.value) {
		return currentSku.value.stock;
	}
	return 0;
});

// 切换标签页
const changeTab = (tabId) => {
	activeTab.value = tabId
}

// 返回上一页
const goBack = () => {
	uni.navigateBack()
}

// 联系客服
const contactService = () => {
	uni.navigateTo({
		url: '/subpackage_msg/msg/customer_service'
	})
}

// 跳转店铺
const goToShop = () => {
	uni.navigateTo({
		url: `/pages/shop/index?id=${product.value.merchant.id}`
	})
}

// 跳转购物车
const goToCart = () => {
	uni.switchTab({
		url: '/pages/cart/index'
	})
}

// 显示规格弹窗
const showSkuPopup = () => {
	skuPopup.value.open()
}

// 关闭规格弹窗
const closeSkuPopup = () => {
	skuPopup.value.close()
}

// 选择规格
const selectSpec = (specName, option) => {
	selectedSpecs.value[specName] = option
	// 更新价格显示
	updatePriceDisplay()
}

// 更新价格显示
const updatePriceDisplay = () => {
	// 价格已通过计算属性自动更新
	console.log('规格已更新，当前SKU:', currentSku.value)
}

// 改变数量
const changeQuantity = (delta) => {
	const newValue = quantity.value + delta
	if (newValue >= 1 && newValue <= 99) {
		quantity.value = newValue
	}
}

// 验证数量输入
const validateQuantity = () => {
	if (quantity.value < 1) quantity.value = 1
	if (quantity.value > 99) quantity.value = 99
}

// 加入购物车
const addToCart = () => {
	uni.showToast({
		title: '已加入购物车',
		icon: 'success'
	})
	cartCount.value++
	closeSkuPopup()
}

// 立即购买
const buyNow = () => {
	showSkuPopup()
}

// 从弹窗立即购买
const buyNowFromPopup = () => {
	uni.navigateTo({
		url: '/subpackage_order/order/checkout'
	})
	closeSkuPopup()
}

// 发起拼团
const startGroupon = () => {
	showSkuPopup()
	// 设置拼团标记，在提交订单时使用
	uni.setStorageSync('orderType', 'groupon')
}

// 参与秒杀
const joinSeckill = () => {
	showSkuPopup()
	// 设置秒杀标记，在提交订单时使用
	uni.setStorageSync('orderType', 'seckill')
}

// 发起砍价
const startBargain = () => {
	showSkuPopup()
	// 设置砍价标记，在提交订单时使用
	uni.setStorageSync('orderType', 'bargain')
}

// 参与抢购
const joinFlashsale = () => {
	showSkuPopup()
	// 设置抢购标记，在提交订单时使用
	uni.setStorageSync('orderType', 'flashsale')
}

// 轮播图变化事件
const swiperChange = (e) => {
	currentImageIndex.value = e.detail.current
}

// 页面加载事件，解析路由参数
onLoad((options) => {
	console.log('页面参数:', options)

	// 解析活动ID
	if (options.activityId) {
		currentActivityId.value = parseInt(options.activityId)
		console.log('来自活动:', currentActivityId.value)
	}

	// 解析活动类型
	if (options.activityType) {
		activityType.value = options.activityType
		console.log('活动类型:', activityType.value)
	} else if (options.activityId) {
		// 如果有活动ID但没有活动类型，根据活动ID查找对应的活动类型
		const activity = productActivities.value.find(item => item.id === currentActivityId.value)
		if (activity) {
			activityType.value = activity.type
			console.log('根据活动ID推断活动类型:', activityType.value)
		}
	}

	// 解析分享者ID
	if (options.sharerId) {
		sharerId.value = options.sharerId
		console.log('分享者ID:', sharerId.value)
	}

	// 这里可以根据活动ID和类型加载对应的活动数据和样式
	loadProductData()

	// 初始化默认选择的SKU
	initDefaultSku()
})

// 初始化默认选择的SKU
const initDefaultSku = () => {
	// 如果已经选择了规格，则不需要初始化
	const allSpecsSelected = product.value.specs.every(spec => {
		return selectedSpecs.value[spec.name] !== undefined;
	});

	if (allSpecsSelected && currentSku.value) return;

	// 查找第一个有库存的SKU
	const firstAvailableSku = product.value.skus.find(sku => sku.stock > 0);

	if (firstAvailableSku) {
		// 设置默认选中的规格
		Object.keys(firstAvailableSku.specs).forEach(specName => {
			selectedSpecs.value[specName] = firstAvailableSku.specs[specName];
		});
		console.log('已默认选择规格:', selectedSpecs.value);
	} else {
		// 如果没有有库存的SKU，选择第一个SKU
		const firstSku = product.value.skus[0];
		if (firstSku) {
			Object.keys(firstSku.specs).forEach(specName => {
				selectedSpecs.value[specName] = firstSku.specs[specName];
			});
			console.log('已默认选择规格(无库存):', selectedSpecs.value);
		}
	}
}

// 加载商品数据
const loadProductData = () => {
	// 这里应该是从API获取商品数据
	// 示例中使用的是静态数据
	console.log('加载商品数据')

	// 根据活动类型加载对应的活动数据
	if (activityType.value !== 'normal') {
		loadActivityData()
	}
}

// 加载活动数据
const loadActivityData = () => {
	console.log('加载活动数据:', activityType.value)
	// 这里应该从API获取活动数据
	// 示例中使用静态数据
}

// 活动相关方法已移至各活动组件中

// 拼团信息数据
const grouponInfo = ref({
	requiredPeople: 3,
	countdown: {
		hours: '23',
		minutes: '45',
		seconds: '30'
	},
	participants: [
		'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1780&q=80',
		'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2787&q=80'
	]
})

// 砍价信息数据
const bargainInfo = ref({
	currentPrice: (parseFloat(currentPrice.value) * 0.7).toFixed(1),
	countdown: {
		hours: '23',
		minutes: '45',
		seconds: '30'
	},
	bargainedAmount: '30.0',
	remainingAmount: '20.0',
	progressPercentage: 60,
	friends: [
		{
			name: '张三',
			avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1780&q=80',
			price: '10.0'
		},
		{
			name: '李四',
			avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2787&q=80',
			price: '8.5'
		},
		{
			name: '王五',
			avatar: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2787&q=80',
			price: '6.5'
		},
		{
			name: '赵六',
			avatar: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1961&q=80',
			price: '5.0'
		}
	]
})

// 获取拼团活动信息
const getGrouponActivity = () => {
	return productActivities.value.find(activity => activity.type === 'groupon')
}

// 获取砍价活动信息
const getBargainActivity = () => {
	return productActivities.value.find(activity => activity.type === 'bargain')
}

// 邀请好友砍价
const inviteFriendsToBargain = () => {
	// 显示分享弹窗
	showSharePopup()
	// 可以在这里设置分享类型为砍价
	uni.showToast({
		title: '邀请好友砍价',
		icon: 'none'
	})
}

// 邀请好友拼团
const inviteFriendsToGroupon = () => {
	// 显示分享弹窗
	showSharePopup()
	// 可以在这里设置分享类型为拼团
	uni.showToast({
		title: '邀请好友拼团',
		icon: 'none'
	})
}

// 活动价格计算方法
// 这些方法保留在商品详情页，因为它们与商品价格直接相关
// 获取拼团价格
const getGrouponPrice = () => {
	// 基于当前选中的SKU价格计算
	return (parseFloat(currentPrice.value) * 0.7).toFixed(1)
}

// 获取秒杀价格
const getSeckillPrice = () => {
	// 基于当前选中的SKU价格计算
	return (parseFloat(currentPrice.value) * 0.5).toFixed(1)
}

// 获取抢购价格
const getFlashsalePrice = () => {
	// 基于当前选中的SKU价格计算
	return (parseFloat(currentPrice.value) * 0.6).toFixed(1)
}

// 获取砍价价格
const getBargainPrice = () => {
	// 基于当前选中的SKU价格计算
	return (parseFloat(currentPrice.value) * 0.5).toFixed(1)
}

// 切换活动
const switchActivity = (activity) => {
	console.log('切换到活动:', activity);
	currentActivityId.value = activity.id;
	activityType.value = activity.type;

	// 这里可以根据活动类型加载对应的活动数据
	loadActivityData();
}

// 处理活动点击
const handleActivityClick = (activity) => {
	console.log('点击当前活动:', activity);
	// 确保当前活动类型与点击的活动类型一致
	if (activity && activity.type) {
		activityType.value = activity.type;
		currentActivityId.value = activity.id;
	}
	// 这里可以处理点击当前活动的逻辑，比如显示活动详情等
}

// 显示分享弹窗
const showSharePopup = () => {
	sharePopup.value.open()
}

// 关闭分享弹窗
const closeSharePopup = () => {
	sharePopup.value.close()
}

// 分享给微信好友
const shareToFriend = () => {
	// 调用微信分享API
	uni.share({
		provider: 'weixin',
		scene: 'WXSceneSession',
		type: 0,
		title: product.value.name,
		summary: `¥${product.value.currentPrice} ${product.value.tags.join(' ')}`,
		imageUrl: product.value.images[0],
		href: generateShareLink(),
		success: function (res) {
			console.log('分享成功:', res)
			uni.showToast({
				title: '分享成功',
				icon: 'success'
			})
		},
		fail: function (err) {
			console.log('分享失败:', err)
			uni.showToast({
				title: '分享失败',
				icon: 'none'
			})
		}
	})
	closeSharePopup()
}

// 分享到朋友圈
const shareToTimeline = () => {
	// 调用微信分享API
	uni.share({
		provider: 'weixin',
		scene: 'WXSceneTimeline',
		type: 0,
		title: `${product.value.name} ¥${product.value.currentPrice}`,
		summary: product.value.tags.join(' '),
		imageUrl: product.value.images[0],
		href: generateShareLink(),
		success: function (res) {
			console.log('分享成功:', res)
			uni.showToast({
				title: '分享成功',
				icon: 'success'
			})
		},
		fail: function (err) {
			console.log('分享失败:', err)
			uni.showToast({
				title: '分享失败',
				icon: 'none'
			})
		}
	})
	closeSharePopup()
}

// 生成分享链接
const generateShareLink = () => {
	// 获取当前用户ID
	const userId = uni.getStorageSync('userId') || '0'

	// 构建分享链接，包含商品ID、活动ID和分享者ID
	let shareLink = `/pages/product/product_detail?id=${product.value.id}&sharerId=${userId}`

	// 如果当前有活动，添加活动ID
	if (currentActivityId.value) {
		shareLink += `&activityId=${currentActivityId.value}`
	}

	return shareLink
}

// 生成海报
const generatePoster = () => {
	// 这里应该调用生成海报的API
	// 示例中使用静态图片
	posterUrl.value = product.value.images[0]
	closeSharePopup()
	posterPopup.value.open()
}

// 关闭海报弹窗
const closePosterPopup = () => {
	posterPopup.value.close()
}

// 保存海报到相册
const savePoster = () => {
	uni.saveImageToPhotosAlbum({
		filePath: posterUrl.value,
		success: function () {
			uni.showToast({
				title: '保存成功',
				icon: 'success'
			})
		},
		fail: function () {
			uni.showToast({
				title: '保存失败',
				icon: 'none'
			})
		}
	})
}
</script>

<style lang="scss" scoped>
/* 商品库存样式 */
.product-stock {
	font-size: 12px;
	color: #666;
	margin-top: 5px;
}

.product-stock-empty {
	color: #ff3b30;
}

/* SKU弹窗库存样式 */
.sku-popup-stock {
	font-size: 12px;
	color: #666;
	margin-top: 5px;
}

.sku-popup-stock-empty {
	color: #ff3b30;
}

/* 库存警告提示 */
.sku-stock-warning {
	background-color: #fff8f8;
	padding: 8px 15px;
	border-radius: 4px;
	margin: 10px 0;
	font-size: 12px;
	color: #ff6a6a;
}

.sku-stock-empty {
	background-color: #fff0f0;
	color: #ff3b30;
}

/* 邀请好友砍价按钮样式 */
.invite-bargain-button-container,
.invite-groupon-button-container {
	margin-top: 15px;
	padding: 0 15px;
}

.invite-bargain-button,
.invite-groupon-button {
	width: 100%;
	height: 40px;
	line-height: 40px;
	background-color: #ff6a6a;
	color: #fff;
	border-radius: 20px;
	font-size: 14px;
	font-weight: bold;
}

/* 拼团商品展示区样式 */
.groupon-current-sku {
	background-color: #fff;
	margin: 10px 0;
	padding: 10px 15px;
	border-radius: 8px;
}

.groupon-sku-header {
	margin-bottom: 10px;
}

.groupon-sku-title {
	font-size: 14px;
	font-weight: bold;
	color: #333;
}

.groupon-sku-content {
	display: flex;
	align-items: center;
	padding: 10px 0;
}

.groupon-sku-image {
	width: 80px;
	height: 80px;
	border-radius: 4px;
	margin-right: 10px;
	background-color: #f5f5f5;
}

.groupon-sku-info {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.groupon-sku-name {
	font-size: 14px;
	color: #333;
	line-height: 1.4;
	margin-bottom: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.groupon-sku-spec {
	font-size: 12px;
	color: #999;
	margin-bottom: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.groupon-sku-price-row {
	display: flex;
	align-items: center;
}

.groupon-sku-price {
	font-size: 16px;
	color: #ff6a6a;
	font-weight: bold;
	margin-right: 5px;
}

.groupon-sku-original-price {
	font-size: 12px;
	color: #999;
	text-decoration: line-through;
}

/* 禁用按钮样式 */
.button-disabled {
	background-color: #ccc !important;
	color: #fff !important;
	opacity: 0.8;
}

.product-detail-page {
	background-color: #f8f8f8;
	min-height: 100vh;
	padding-bottom: 60px;
}

.nav-bar {
	display: flex;
	align-items: center;
	padding: 10px 15px;
	background-color: #fff;
	border-bottom: 1px solid #eee;

	.title {
		flex: 1;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
	}
}

.product-swiper {
	height: 350px;
	position: relative;

	.swiper-image {
		width: 100%;
		height: 100%;
	}
}

.product-info-section {
	background-color: #fff;
	padding: 15px;
	margin-bottom: 10px;

	.product-price-share-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.product-price-section {
		display: flex;
		align-items: baseline;

		.product-current-price {
			color: #ff6a6a;
			font-size: 24px;
			font-weight: bold;
			margin-right: 10px;
		}

		.product-original-price {
			color: #999;
			font-size: 14px;
			text-decoration: line-through;
		}
	}

	.product-share-button {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 5px 10px;

		.share-text {
			font-size: 12px;
			color: #666;
			margin-top: 2px;
		}
	}

	.product-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
		line-height: 1.4;
	}

	.product-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 5px;
		margin-bottom: 10px;

		.tag {
			font-size: 11px;
			padding: 2px 6px;
			border-radius: 3px;
			background-color: rgba(255, 106, 106, 0.1);
			color: #ff6a6a;
		}
	}

	.product-sales {
		color: #999;
		font-size: 13px;
	}

	.product-sku-section {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.product-section-title {
			font-size: 14px;
			font-weight: bold;
		}

		.sku-selected {
			font-size: 13px;
			color: #666;
			display: flex;
			align-items: center;
		}
	}
}

.merchant-section {
	display: flex;
	align-items: center;
	padding: 15px;
	background-color: #fff;
	margin-bottom: 10px;

	.merchant-logo {
		width: 40px;
		height: 40px;
		border-radius: 5px;
		overflow: hidden;
		margin-right: 10px;
	}

	.merchant-info {
		flex: 1;

		.merchant-name {
			font-size: 14px;
			font-weight: bold;
			margin-bottom: 3px;
		}

		.merchant-stats {
			display: flex;
			font-size: 12px;
			color: #999;

			.merchant-stat {
				margin-right: 15px;

				.merchant-stat-value {
					color: #ff6a6a;
				}
			}
		}
	}

	.merchant-enter {
		padding: 6px 12px;
		border: 1px solid #ff6a6a;
		border-radius: 15px;
		color: #ff6a6a;
		font-size: 12px;
	}
}

.product-detail-section {
	background-color: #fff;
	padding: 15px;
	margin-bottom: 10px;

	.product-detail-tabs {
		display: flex;
		border-bottom: 1px solid #eee;
		margin-bottom: 15px;

		.product-detail-tab {
			flex: 1;
			text-align: center;
			padding: 10px 0;
			font-size: 14px;
			position: relative;

			&.active {
				color: #ff6a6a;
				font-weight: bold;

				&::after {
					content: '';
					position: absolute;
					bottom: -1px;
					left: 50%;
					transform: translateX(-50%);
					width: 20px;
					height: 2px;
					background-color: #ff6a6a;
				}
			}
		}
	}

	.tab-content {
		padding: 15px 0;

		.param-item {
			display: flex;
			padding: 8px 0;
			font-size: 13px;
			border-bottom: 1px solid #eee;

			.param-label {
				width: 80px;
				color: #999;
			}

			.param-value {
				flex: 1;
			}
		}

		.review-item {
			padding: 15px 0;
			border-bottom: 1px solid #eee;

			.review-user {
				display: flex;
				align-items: center;
				margin-bottom: 10px;

				.review-avatar {
					width: 30px;
					height: 30px;
					border-radius: 15px;
					overflow: hidden;
					margin-right: 10px;
				}

				.review-username {
					font-size: 13px;
					font-weight: bold;
				}

				.review-date {
					font-size: 12px;
					color: #999;
					margin-left: auto;
				}
			}

			.review-rating {
				color: #ffcc00;
				font-size: 12px;
				margin-bottom: 5px;
			}

			.review-content {
				font-size: 14px;
				line-height: 1.5;
				margin-bottom: 10px;
			}

			.review-images {
				display: flex;
				gap: 5px;
				margin-bottom: 10px;

				.review-image {
					width: 70px;
					height: 70px;
					border-radius: 4px;
					overflow: hidden;
				}
			}
		}
	}
}

.product-action-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
	background-color: white;
	display: flex;
	align-items: center;
	box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
	z-index: 10;
	padding: 0 15px;

	.action-icon {
		width: 45px;
		height: 50px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		color: #666;
		position: relative;

		.action-icon-label {
			font-size: 12px;
			margin-top: 3px;
			white-space: nowrap;
			text-align: center;
			width: 100%;
		}

		.action-icon-badge {
			position: absolute;
			top: 0;
			right: 5px;
			background-color: #ff6a6a;
			color: white;
			font-size: 10px;
			width: 16px;
			height: 16px;
			border-radius: 8px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.action-buttons {
		flex: 1;
		display: flex;
		gap: 10px;
		padding-left: 15px;
		margin-left: auto;
		justify-content: flex-end;
		min-width: 200px;

		.action-button {
			flex: 1;
			height: 40px;
			border-radius: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
			font-weight: bold;
			position: relative;
			min-width: 80px;
			padding: 0 10px;

			.button-price {
				font-size: 12px;
				margin-left: 4px;
				font-weight: normal;
			}

			&.action-button-cart {
				background-color: #f8f8f8;
				border: 1px solid #e0e0e0;
				color: #666;
			}

			&.action-button-buy {
				background-color: #ff4545;
				border: 1px solid #ff3030;
				color: white;
			}

			// 拼团按钮样式 - 与活动标签颜色一致 #ff6a6a
			&.action-button-groupon {
				background-color: #ff6a6a;
				border: 1px solid #e55a5a;
				color: white;
			}

			// 秒杀按钮样式 - 与活动标签颜色一致 #ff9500
			&.action-button-seckill {
				background-color: #ff9500;
				border: 1px solid #f08200;
				color: white;
			}

			// 砍价按钮样式 - 与活动标签颜色一致 #5856d6
			&.action-button-bargain {
				background-color: #5856d6;
				border: 1px solid #4b49c2;
				color: white;
			}

			// 抢购按钮样式 - 与活动标签颜色一致 #ff3b30
			&.action-button-flashsale {
				background-color: #ff3b30;
				border: 1px solid #e0352b;
				color: white;
			}

			// 优惠券按钮样式
			&.action-button-coupon {
				background-color: #007aff;
				border: 1px solid #0070e8;
				color: white;
			}
		}
	}
}

.sku-popup {
	background-color: #fff;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	padding: 20px 15px;
	position: relative;

	.sku-popup-close {
		position: absolute;
		top: 15px;
		right: 15px;
		z-index: 1;
	}

	.sku-popup-header {
		display: flex;
		margin-bottom: 20px;

		.sku-popup-img {
			width: 80px;
			height: 80px;
			border-radius: 5px;
			margin-right: 15px;
		}

		.sku-popup-info {
			flex: 1;

			.sku-popup-price-section {
				margin-bottom: 5px;

				.sku-popup-price-row {
					display: flex;
					align-items: baseline;
				}

				.sku-popup-price {
					color: #ff6a6a;
					font-size: 20px;
					font-weight: bold;
					margin-right: 5px;
				}

				.sku-popup-price-label {
					color: #ff6a6a;
					font-size: 12px;
					margin-right: 5px;
				}

				.sku-popup-original-price {
					color: #999;
					font-size: 13px;
					text-decoration: line-through;
				}

				.sku-popup-groupon-price {
					color: #ff9500;
				}

				.sku-popup-seckill-price {
					color: #ff3b30;
				}

				.sku-popup-bargain-price {
					color: #34c759;
				}

				.sku-popup-flashsale-price {
					color: #5856d6;
				}
			}

			.sku-popup-selected {
				font-size: 13px;
				color: #666;
			}
		}
	}

	.sku-popup-section {
		margin-bottom: 20px;

		.sku-popup-title {
			font-size: 14px;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.sku-popup-options {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;

			.sku-popup-option {
				padding: 8px 15px;
				border: 1px solid #ddd;
				border-radius: 20px;
				font-size: 13px;
				background-color: #f9f9f9;

				&.active {
					border-color: #ff6a6a;
					color: #ff6a6a;
					background-color: rgba(255, 106, 106, 0.05);
				}
			}
		}

		.sku-popup-quantity {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.quantity-control {
				display: flex;
				align-items: center;
				border: 1px solid #ddd;
				border-radius: 20px;
				overflow: hidden;

				.quantity-btn {
					width: 30px;
					height: 30px;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #f5f5f5;
					font-size: 14px;
				}

				.quantity-input {
					width: 40px;
					height: 30px;
					border: none;
					text-align: center;
					font-size: 14px;
				}
			}
		}
	}

	.product-action-buttons {
		display: flex;
		gap: 10px;

		.action-button {
			flex: 1;
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20px;
			font-size: 14px;
			font-weight: bold;

			.button-price {
				font-size: 12px;
				margin-left: 4px;
				font-weight: normal;
			}

			&.add-cart-btn {
				background-color: #f8f8f8;
				border: 1px solid #e0e0e0;
				color: #666;
			}

			&.buy-now-btn {
				background-color: #ff4545;
				border: 1px solid #ff3030;
				color: white;
			}

			&.action-button-groupon {
				background-color: #ff6a6a;
				border: 1px solid #e55a5a;
				color: white;
			}

			&.action-button-seckill {
				background-color: #ff9500;
				border: 1px solid #f08200;
				color: white;
			}

			&.action-button-bargain {
				background-color: #5856d6;
				border: 1px solid #4b49c2;
				color: white;
			}

			&.action-button-flashsale {
				background-color: #ff3b30;
				border: 1px solid #e0352b;
				color: white;
			}
		}
	}
}

.share-popup {
	background-color: #fff;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	padding: 20px 15px;

	.share-popup-title {
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.share-options {
		display: flex;
		justify-content: space-around;
		margin-bottom: 30px;

		.share-option {
			display: flex;
			flex-direction: column;
			align-items: center;

			.share-icon {
				width: 60px;
				height: 60px;
				border-radius: 30px;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 8px;
				background-color: #f5f5f5;
			}

			.share-text {
				font-size: 12px;
				color: #333;
			}
		}
	}

	.share-cancel {
		height: 44px;
		line-height: 44px;
		text-align: center;
		border-top: 1px solid #eee;
		color: #666;
		font-size: 14px;
	}
}

.poster-popup {
	background-color: #fff;
	border-radius: 12px;
	width: 80%;
	padding: 15px;

	.poster-image {
		width: 100%;
		height: 400px;
		margin-bottom: 15px;
	}

	.poster-actions {
		display: flex;
		gap: 10px;

		.poster-action-btn {
			flex: 1;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border-radius: 20px;
			font-size: 14px;
			background-color: #ff6a6a;
			color: white;

			&.poster-action-close {
				background-color: #f5f5f5;
				color: #666;
			}
		}
	}
}

/* 活动详情区域 */
.activity-detail-section {
	background-color: #fff;
	padding: 20rpx 30rpx;
	margin-bottom: 20rpx;
	border-radius: 12rpx;
}

.activity-detail-header {
	margin-bottom: 20rpx;
}

.activity-detail-title {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}

.activity-detail-subtitle {
	font-size: 24rpx;
	color: #666;
	display: block;
}

.activity-detail-content {
	background-color: #f9f9f9;
	padding: 20rpx;
	border-radius: 8rpx;
}

.activity-detail-info {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.activity-detail-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.activity-detail-label {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 10rpx;
}

.activity-detail-value {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}

.activity-detail-price {
	color: #ff5500;
	font-size: 32rpx;
}

.activity-countdown {
	display: flex;
	align-items: center;
}

.countdown-box {
	background-color: #333;
	color: white;
	border-radius: 4rpx;
	padding: 4rpx 8rpx;
	margin: 0 4rpx;
	font-size: 24rpx;
	font-weight: 600;
	min-width: 40rpx;
	text-align: center;
}

.countdown-separator {
	color: #333;
	margin: 0 2rpx;
	font-weight: 600;
}

/* 拼团详情区域特有样式 */
.activity-detail-participants {
	margin-top: 20rpx;
}

.participants-title {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 15rpx;
	display: block;
}

.participants-avatars {
	display: flex;
	margin-bottom: 15rpx;
}

.participant-avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-right: 15rpx;
	border: 2rpx solid #fff;
	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.participant-avatar-more {
	background-color: #f5f5f5;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	color: #999;
}

.participants-status {
	font-size: 24rpx;
	color: #ff5500;
}

/* 砍价商品规格区域样式 */
.bargain-current-sku {
	margin: 20rpx 0;
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.bargain-sku-header {
	padding: 16rpx 20rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.bargain-sku-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
}

.bargain-sku-content {
	padding: 20rpx;
	display: flex;
	align-items: center;
}

.bargain-sku-image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
	background-color: #f9f9f9;
	border: 1rpx solid #eee;
}

.bargain-sku-info {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.bargain-sku-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.bargain-sku-spec {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 10rpx;
	padding: 4rpx 12rpx;
	background-color: #f5f5f5;
	border-radius: 20rpx;
	display: inline-block;
}

.bargain-sku-price-row {
	display: flex;
	align-items: center;
}

.bargain-sku-price {
	font-size: 32rpx;
	color: #ff5500;
	font-weight: bold;
	margin-right: 10rpx;
}

.bargain-sku-original-price {
	font-size: 24rpx;
	color: #999;
	text-decoration: line-through;
}

/* 砍价详情区域特有样式 */
.bargain-progress {
	margin-bottom: 20rpx;
}

.progress-text {
	display: flex;
	justify-content: space-between;
	font-size: 24rpx;
	color: #666;
	margin-bottom: 10rpx;
}

.progress-bar {
	width: 100%;
	height: 16rpx;
	background-color: #eee;
	border-radius: 8rpx;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background-color: #ff7000;
	border-radius: 8rpx;
}

.bargain-friends {
	margin-top: 20rpx;
}

.friends-title {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 15rpx;
	display: block;
}

.friends-list {
	background-color: #fff;
	border-radius: 8rpx;
	padding: 10rpx;
}

.friend-item {
	display: flex;
	align-items: center;
	padding: 10rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.friend-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	margin-right: 15rpx;
}

.friend-name {
	font-size: 26rpx;
	color: #333;
	flex: 1;
}

.friend-price {
	font-size: 26rpx;
	color: #ff7000;
	font-weight: bold;
}

.friend-more {
	text-align: center;
	padding: 15rpx 0;
	font-size: 24rpx;
	color: #0077ff;
}
</style>